import React, { useRef, useState, useEffect } from 'react';
import {
  View,
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  Keyboard,
} from 'react-native';
import Pdf from '../local-packages/@react-native-oh-tpl/react-native-pdf';
const App = () => {
  const [pageCount, setPageCount] = useState(0);
  const [pageNum, setPageNum] = useState('1');
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [showInvalidHint, setShowInvalidHint] = useState(false);
  const pdfRef = useRef(null);

  // 监听键盘事件
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      event => {
        setKeyboardHeight(event.endCoordinates.height);
      },
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardHeight(0);
      },
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);
  const source = {
    uri: 'https://www-file.huawei.com/minisite/media/annual_report/annual_report_2022_cn.pdf',
    cache: true,
  };

  return (
    <View style={styles.sectionContainer}>
      <View
        style={[
          styles.btnContainer,
          { bottom: keyboardHeight > 0 ? keyboardHeight : 0 },
        ]}>
        <Text style={{ color: 'white', fontSize: 16, marginRight: 10 }}>
          页码
        </Text>
        <TextInput
          value={pageNum}
          style={styles.textInputStyle}
          selectionColor="white"
          onChangeText={text => {
            setPageNum(text);
          }}
          onBlur={e => {
            if (pdfRef.current) {
              const text = e.nativeEvent.text;
              let num = Number(text);
              if (isNaN(num)) {
                setShowInvalidHint(true);
              } else {
                (pdfRef.current as any).setPage(num);
                if (num < 1) {
                  setPageNum('1');
                } else if (num > pageCount) {
                  setPageNum(pageCount.toString());
                }
                showInvalidHint && setShowInvalidHint(false);
              }
            }
          }}
        />
        <Text style={{ color: 'white', fontSize: 16 }}>/ {pageCount}</Text>
        {showInvalidHint && (
          <Text style={{ color: 'red', fontSize: 12, position: 'absolute', right: 40, transform: [{ translateY: -5 }] }}>请输入有效页码</Text>
        )}
      </View>
      <Pdf
        ref={pdfRef}
        source={source}
        onLoadComplete={(numberOfPages, filePath) => {
          console.log(`Number of pages: ${numberOfPages}`);
          setPageCount(numberOfPages);
        }}
        onPageChanged={(page, numberOfPages) => {
          setPageNum(page.toString());
          console.log(`Current page h: ${page}`);
        }}
        onError={error => {
          console.log(error);
        }}
        onPressLink={uri => {
          console.log(`Link pressed: ${uri}`);
        }}
        style={styles.pdf}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 800,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  btnContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    height: 60,
    backgroundColor: '#3c3c3c',
    left: 0,
    right: 0,
    bottom: 0,
    paddingBottom: 10,
    zIndex: 9999,
    transitionProperty: 'bottom',
    transitionDuration: '300ms',
    transitionTimingFunction: 'ease-in-out',
  },
  textInputStyle: {
    width: 30,
    height: 25,
    backgroundColor: 'black',
    textAlign: 'center',
    color: 'white',
    marginRight: 5,
  },
});

export default App;
